<template>
  <div class="home">

    <div class="title">我的活动</div>

    <div class="content">
      <div v-for="item of items" :key="item.id">
          <img :src="item.imageURL"/>
          <p class="content-title">{{item.title}}</p>
          <p class="content-date">{{item.date}}</p>
          <p class="content-address">{{item.address}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data(){
      return {
          items:[
              {'id':1,imageURL:'http://file.popsage.cn/yeke/images/8d69a98215f5b4ddf572ea9fbdc19f4d.jpeg','title':"我是标题1","date":'2019-10-20','address':'活动地址'},
              {'id':2,imageURL:'http://file.popsage.cn/yeke/images/8d69a98215f5b4ddf572ea9fbdc19f4d.jpeg','title':"我是标题2","date":'2019-10-21','address':'活动地址'},
              {'id':3,imageURL:'http://file.popsage.cn/yeke/images/8d69a98215f5b4ddf572ea9fbdc19f4d.jpeg','title':"我是标题3","date":'2019-10-21','address':'活动地址'},
              {'id':4,imageURL:'http://file.popsage.cn/yeke/images/8d69a98215f5b4ddf572ea9fbdc19f4d.jpeg','title':"我是标题4","date":'2019-10-21','address':'活动地址'},
              {'id':5,imageURL:'http://file.popsage.cn/yeke/images/8d69a98215f5b4ddf572ea9fbdc19f4d.jpeg','title':"我是标题5","date":'2019-10-21','address':'活动地址'},
              {'id':6,imageURL:'http://file.popsage.cn/yeke/images/8d69a98215f5b4ddf572ea9fbdc19f4d.jpeg','title':"我是标题6","date":'2019-10-21','address':'活动地址'}


          ]
      }
  }  ,
  components: {

  }
}
</script>

<style>
  .title{
    height: .88rem;
    font-size: .36rem;
    color: #263238;
    line-height: .88rem;
  }

  .content img{
    width: 100%;
  }

  .content .content-title{
    font-size: .32rem;
    color: #263238;
    height: .6rem;
    line-height: .6rem;
    text-align: left;
  }

  .content .content-date{
    font-size: .24rem;
    color: #607D8B;
    height: .3rem;
    line-height: .3rem;
    text-align: left;
  }

  .content .content-address{
    font-size: .24rem;
    color: #607D8B;
    height: .3rem;
    line-height: .3rem;
    text-align: left;
  }

</style>
